<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady" style="background-color: #F5F5F5; padding: 16rpx;">
		<moxi-nav :set="navSet"></moxi-nav>
		<view v-for="(mod, mk) in modData" :class="mod.mod_class" :style="mod.css">
			<view v-if="mod.name == 'shopcart'">
				<!-- 全选和编辑 -->
				<u-checkbox-group v-model="check" @change="checkboxChange" placement="column" :activeColor="app_color"
					v-if="cartList.length > 0">
					<view style="display: flex; flex-direction: column; gap: 8px;">
						<view class="control-box">
							<view class="allSelect" @click="check_all()">
								<view class="clear-icon-box"
									:style="checkAll ? `background-color: ${app_color}; border: 2rpx solid ${app_color};` : ''">
									<u-icon name="checkmark" size="12" color="#fff"></u-icon>
								</view>
								<text style="margin-left: 8rpx; color: #666;">全选</text>
							</view>
							<!-- 编辑 -->
							<view class="control" @click="isDelStatus = !isDelStatus">{{ !isDelStatus ? '编辑' : '完成' }}
							</view>
						</view>
						<view class="cart-list" v-for="(list, key) in cartList">
							<!-- 选择该商品全部规格 -->
							<view class="control-box" v-if="isDelStatus">
								<view class="control" @click="clearCart(list.id)"
									style="color: #999; margin: 0 0 0 auto;">删除</view>
							</view>

							<view class="cart-info" v-for="(l, k) in list.spec_info">
									<view class="flexBox" @click="clickSpec(list.id + '-' + l.spec_name)">
										<u-checkbox :name="list.id + '-' + l.spec_name" shape="circle">
										</u-checkbox>
									</view>
								<view class="img-box">
									<image :src="l.img" style="width: 100%; height: 100%;" mode="aspectFill">
									</image>
								</view>
								<view class="right-box">
									<view class="cart-title">
										<text class="u-line-1 ">{{ list.title }}</text>
									</view>

									<!-- 可以添加调整商品详细页面 -->
									<view class="spec_name_box">
										<text class="spec_name">规格：{{ l.spec_name }}</text>
									</view>

									<text class="price">￥<text class="number">{{ l.shop_price }}</text>
										<text class="current"
											v-if="Number(l.market_price) > Number(l.shop_price)">￥<text
												class="number">{{ l.market_price }}</text></text>
									</text>

									<!-- 修改商品数量 -->
									<view class="selectNumber" v-if="!isDelStatus">
										<u-number-box min="1" :asyncChange="true"
											v-model="cartList[key].spec_info[k].num"
											@change="valChange($event, list.goods_id, key, k)"></u-number-box>
									</view>

									<!-- 删除商品 -->
									<view class="del-box" v-if="isDelStatus">
										<u-icon name="trash" @click="del(list.id, k)" :bold="false" color="#fff"
											size="20px"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>

				<!-- 没有商品 -->
				<view v-if="!cartList.length" style="padding: 38rpx 30rpx;">
					<u-empty mode="car" width="300" height="300"
						icon="https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/car.png">
					</u-empty>
					<view style="text-align: center;padding: 16rpx 24rpx; margin-top: 48rpx;">
						<text
							style="padding: 16rpx 24rpx;border: 2rpx solid #f56c6c; border-radius: 999px; color: #f56c6c;"
							@click="navto('/pages/index/index')">去逛逛吧</text>
					</view>
				</view>
				<!-- 结算 -->
				<view v-if="cartList.length">
					<view class="buy-box" :style="tabbar.curPage ? 'bottom: 50px;' : ''">
						<view class="buy-info">
							<view class="allSelect" @click="check_all()">
								<!-- 全选 -->
								<view class="clear-icon-box"
									:style="checkAll ? `background-color: ${app_color}; border: 2rpx solid ${app_color};` : ''">
									<u-icon name="checkmark" size="12" color="#fff"></u-icon>
								</view>
								<view style="margin-left: 4px; color: #666; display: flex; align-items: center;">
									<view>
										全选
									</view>
								</view>
							</view>

							<view style="display: flex;flex-direction: column; margin: 0 auto 0 32rpx;"
								v-if="!isDelStatus">
								<text style="font-weight: bold; font-size: 20rpx; color: #F1454D;">￥<text
										style="font-size: 32rpx;">{{ shop_price }}</text></text>
								<text style="color: #999;font-size: 20rpx;" v-if="market_price - shop_price > 0">已优惠：
									<text style="font-weight: bold">{{ market_price - shop_price }}</text>元</text>
							</view>
							<text class="jiesuan" @click="createdOrder()" v-if="!isDelStatus">
								去结算
							</text>
							<text class="jiesuan" @click="clearCart()" v-if="isDelStatus">
								删除
							</text>
						</view>
					</view>
				</view>
			</view>
			<moxi-index v-else :list="mod"></moxi-index>
		</view>
		<moxi-tabbar :set="tabbar" v-if="tabbar.index_id"></moxi-tabbar>
	</view>
</template>
<script>
export default {
	data() {
		return {
			checkNumStatus: false,
			modal: {
				id: "",
				spec_name: ""
			},
			clearWidth: 30,
			checkAll: false,
			check: [], // 购物车选中各商品规格 对象
			goodsCheck: [], // 购物车选中所有商品 对象
			cartList: [], // 购物车信息列表
			shop_price: 0,//实际价格
			market_price: 0,//优惠价格
			isDelStatus: false,//是否删除
		}
	},
	onShow() {

	},
	onLoad() {
		this.get()
	},
	methods: {
		checkboxChange(n) {
			this.$set(this, 'check', n)
			this.checkInit();
		},
		createdOrder() {
			let str;
			let param = [];
			// 遍历商品列表
			for (let k in this.cartList) {
				// 遍历商品列表中的规格列表
				for (let s in this.cartList[k].spec_info) {
					// 商品id + 规格名称
					str = this.cartList[k].id + '-' + s;
					// 规格是否选中
					if (this.check.findIndex(item => item == str) != -1) {
						// 选中插入
						param.push({
							goods_id: this.cartList[k].goods_id,
							spec_name: s,
							num: this.cartList[k].spec_info[s].num
						})
					}
				}
			}
			// 订单是否为空
			if (!param.length) {
				this.msg("请选择商品");
				return false;
			}
			this.moxiPost('/plugin/mall/user/order/add', { goods: param }, (data) => {
				if (data.data) {
					this.navto('page_mall/order/created_order?is_cart=1&order_id=' + data.data);
				}
			})
		},
		// 批量删除商品规格
		clearCart(id = false) {
			let carts = [];
			if (id) {
				carts.push(id)
			} else {
				for (let k in this.goodsCheck) {
					carts.push(k);
				}
			}
			if (!this.check) {
				this.msg('请选择删除的商品');
				return;
			}
			this.isBox('删除所选商品规格', (res) => {
				// 先删除选中商品所有规格数据
				if (carts.length > 0) {
					this.moxiPost("/plugin/mall/user/cart/clear", { carts: carts }, (data) => {
						this.msg(data.hint);
						// 从cartList中移除所选商品数据
						for (let k in this.goodsCheck) {
							this.cartList.splice(this.cartList.findIndex(item => item.id == k), 1);
							for (let key in this.check) {
								let id = this.check[key].split('-')[0];
								if (id == k) this.check.splice(key, 1);
							}
						}
					})
				}
				// 再批量删除部分所选规格
				if (!id) {
					this.cartList.forEach(item => {
						for (let key in this.check) {
							let id = this.check[key].split('-')[0];
							let k = this.check[key].split('-')[1];
							setTimeout(() => {
								this.del(id, k, 1);
							}, 100);
							delete item.spec_info[k];
						}
					})
					if (!carts.length) {
						this.msg('操作成功!');
					}
				}
				this.goodsCheck = [];
				this.check = [];
			}, '此操作会删除所选商品规格!');
		},
		// 单个规格删除
		async del(id, k, no = false) {
			this.modal.id = id;
			this.modal.spec_name = k;
			if (no) {
				this.moxiPost("/plugin/mall/user/cart/del", { id: this.modal.id, spec_name: this.modal.spec_name }, (data) => { })
			} else {
				this.isBox('确定删除该商品规格?', (res) => {
					this.moxiPost("/plugin/mall/user/cart/del", { id: this.modal.id, spec_name: this.modal.spec_name }, (data) => {
						this.msg(data.hint);
						this.get()
					})
				})
			}
		},
		valChange(e, goods_id, key, k) {
			const spec = this.cartList[key].spec_info[k];
			const value = e.value - Number(spec.num);
			let info = {
				num: value,
				goods_id: goods_id,
				spec_name: k
			}
			this.moxiPost("/plugin/mall/user/cart/created", info, (data) => {
				this.cartList[key].spec_info[k].num = e.value;
				this.checkInit();
			})
		},
		clickSpec(spec_name) {
			let index = this.check.findIndex(item => item == spec_name);
			if (index != -1) {
				this.check.splice(index, 1);
			} else {
				this.check.unshift(spec_name);
			}
			this.checkInit();
		},
		price() {
			this.shop_price = 0;
			this.market_price = 0;
			let str, num;
			for (let k in this.cartList) {
				for (let s in this.cartList[k].spec_info) {
					str = this.cartList[k].id + '-' + s;
					if (this.check.findIndex(item => item == str) != -1) {
						num = Number(this.cartList[k].spec_info[s].num);
						this.shop_price = this.shop_price + (Number(this.cartList[k].spec_info[s].shop_price) * num);
						this.market_price = this.market_price + (Number(this.cartList[k].spec_info[s].market_price) * num);
					}
				}
			}
		},
		check_all() {
			if (!this.cartList.length) {
				this.msg("请先添加购物车");
				return false;
			}
			let str;
			// 全选变非选
			if (this.checkAll) {
				this.check = [];
			} else {
				// 全选插入数值
				for (let k in this.cartList) {
					for (let s in this.cartList[k].spec_info) {
						str = this.cartList[k].id + '-' + s;
						if (this.check.findIndex(item => item == str) == -1) {
							this.check.unshift(str)
						}
					}
				}
			}
			this.checkInit();
		},
		checkInit() {
			let curCheck, str, goodsCheckNum = 0;
			this.checkAll = true;
			for (let k in this.cartList) {
				curCheck = true;
				for (let s in this.cartList[k].spec_info) {
					str = this.cartList[k].id + '-' + s;
					if (this.check.findIndex(item => item == str) == -1) {
						curCheck = false;
						break
					}
				}
				if (curCheck) {
					// 插入到商品购物车里
					this.goodsCheck.unshift(this.cartList[k].id);
					goodsCheckNum++;
				} else {
					if (this.goodsCheck.findIndex(item => item == this.cartList[k].id) != -1) {
						// 从商品购物车移除
						this.goodsCheck.splice(this.goodsCheck.findIndex(item => item == this.cartList[k].id), 1);
					}
					if (this.checkAll) {
						this.checkAll = false;
					}
				}
			}
			this.price();
		},
		get() {
			this.moxiPost("/plugin/mall/user/cart/get", {}, (data) => {
				this.$set(this, 'cartList', data.data);
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.control-box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	font-size: 24rpx;

	.allSelect {
		display: flex;
		flex-direction: row;
		align-items: center;

		.clear-icon-box {
			width: 8rpx;
			height: 8rpx;
			padding: 8rpx;
			border: 2rpx solid #666666;
			background-color: #fff;
			border-radius: 100px;
			overflow: hidden;
		}
	}

	.control {
		color: #333;
	}
}

.cart-list {
	padding: 28rpx 18rpx;
	background-color: #fff;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	gap: 16rpx;

	.cart-info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.flexBox {
			width: 32rpx;
			padding-right: 24rpx;

			display: flex;
			align-items: center;

			.select_button {
				height: 30rpx;
				width: 30rpx;
				border-radius: 99px;
				flex-shrink: 0;
				display: flex;
				justify-content: center;

				background-color: #fff;
				border: 2rpx solid #666666;
			}
		}

		.img-box {
			flex-shrink: 0;
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}

		.right-box {
			height: 100%;
			flex: 1;
			overflow: hidden;
			margin-left: 16rpx;
			display: flex;
			flex-direction: column;
			gap: 8rpx;

			.cart-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.spec_name_box {
				font-size: 20rpx;
				color: #999;
			}

			.price {
				color: #ff557f;
				font-size: 20rpx;

				.number {
					font-size: 32rpx;
					font-weight: bold;
				}

				.current {
					color: #999;
					text-decoration: line-through;
					margin-left: 8px;

					.number {
						font-size: 24rpx;
					}
				}
			}

			.selectNumber,
			.del-box {
				margin: 0 0 0 auto;
			}

			.del-box {
				padding: 4px;
				background-color: #F1454D;
				border-radius: 8rpx;
			}
		}
	}
}

.cart-list:first-child {
	margin-top: 32rpx;
}

.buy-box {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	z-index: 8;

	.buy-info {
		margin: 16rpx;
		padding: 16rpx;
		height: 60rpx;
		width: 100%;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, .9);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.allSelect {
			display: flex;
			flex-direction: row;
			align-items: center;

			.clear-icon-box {
				width: 8rpx;
				height: 8rpx;
				padding: 8rpx;
				border: 2rpx solid #666666;
				background-color: #fff;
				border-radius: 100px;
				overflow: hidden;
			}
		}
	}
}

.jiesuan {
	padding: 16rpx 32rpx;
	background-color: #F1454D;
	border-radius: 12rpx;
	font-size: 24rpx;
	color: #fff;
}

.clear-icon-box {
	width: 30px;
	height: 30px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.8)
}
</style>